<template>


    <el-card shadow="always">
        <template #header>
            <div>
                <span><b>开票信息</b></span>
            </div>
        </template>
        <el-form>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="票据编号:">
                        <el-input v-model="myHeaderInfo.cknum"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="开票日期:">
                        <el-input v-model="myHeaderInfo.date"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="10">
                <el-col :span="6">
                    <el-form-item label="客户名称:">
                        <el-input v-model="myHeaderInfo.customer"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="客户地址:">
                        <el-input v-model="myHeaderInfo.address"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="联系方式:">
                        <el-input v-model="myHeaderInfo.tel"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

    </el-card>

    <el-card>

        <template #header>

            <el-row>
                <el-col :span="3"><span><b>开票内容</b></span></el-col>
                <el-col :span="21">
                    <el-row justify="end">

                        <el-button icon="plus" type="primary" size="small" @click="addRecord">添加数据</el-button>
                        <el-button icon="document" type="primary" size="small" @click="submitRecords">保存数据</el-button>
                        <el-button icon="printer" type="primary" size="small">打印数据</el-button>

                    </el-row>
                </el-col>
            </el-row>




        </template>

        <el-table :min-height="500" border :data="tableData" :cell-style="cellStyle">


            <el-table-column label="编号" :width="miniWidth">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.num" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.num }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="品名" :width="250">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.name" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.name }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="单位" :width="miniWidth">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.unit" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.unit }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="单价" :width="miniWidth">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.price" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.price }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="数量" :width="miniWidth">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.total" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.total }}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="总价" :width="miniWidth">
                <template #default="scope">
                    <el-input v-if="scope.row.isEditing" v-model="scope.row.totalprice" placeholder="" size="small" />
                    <div class="cell" v-else>
                        <span>{{ scope.row.totalprice }}</span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column>


                          <template #default="scope">
        <el-button type="success" icon="edit" size="small" @click="editRow(scope.row)" :disabled="scope.row.isEditing || isEditing">
          编辑
        </el-button>
        <el-button
          size="small"
          icon="delete"
          type="danger"
          :disabled="isEditing"
          @click="deleteRow(scope.$index, scope.row)"
        >
          删除
        </el-button>
        <el-button
          size="small"
          type="primary"
          icon="document"
          :disabled="!scope.row.isEditing"
          @click="saveRow(scope.row)"

        >
          保存
        </el-button>
      </template>

            </el-table-column>



        </el-table>


    </el-card>




</template>

<script setup lang="ts">
import { ref ,computed} from "vue"
import {postRequest,server} from '../api/index'
// 数据类型定义
interface headerInfo {

    date: string,
    cknum: string,
    customer: string,
    address: string,
    tel: string
}

interface Record {
    num: string,
    name: string,
    unit: string,
    price: string,
    total:string,
    totalprice: string,
    isEditing?:boolean
}

interface myRecord extends headerInfo,Record
{

}

//定义样式
const cellStyle = {
    fontSize:"12px",
    color:"darkgreen"
}



const miniWidth:number = 150
const myHeaderInfo = ref<headerInfo>({

    date: "2025-08-18",
    cknum: "YHDN00000001",
    customer: "香港毕加索景观咨询有限公司",
    address: "和邦大厦30楼",
    tel: "0574-88552233"
})

const tableData = ref<Record[]>([]);

function addRecord(): void {
    tableData.value.push({
    num: "SP00000001",
    name: "I5 9400F散",
    unit: "个",
    price: "1000.00",
    isEditing:true,
    totalprice:"",
    total:"1"
})
}


//计算属性
const isEditing = computed(()=>{

    return tableData.value.some(row=>row.isEditing)

})

function submitRecords():void{

    let rows = []
    tableData.value.forEach(item=>{

        if (item.isEditing != undefined)
            delete item.isEditing
        const row = {...myHeaderInfo.value,...item}
        rows.push(row)
        
    })

    postRequest(`${server}/api/test`,rows).then(data=>{
        console.log(data);
        
    })

}

const saveRow = (row:Record)=>{
    
    row.isEditing = false
    
}
const editRow = (row:Record)=>{
    
    row.isEditing = true
    
}
const deleteRow = (index,row:Record)=>{
    
   tableData.value.splice(index,1)
    
}

</script>

<style scoped>

.cell {
    display: flex;
    align-items: center;
}


</style>